<template>
  <Form :model="form" :label-width="110">
    <FormItem label="所属客户:" prop="companyId">
      <Select :disabled="isEdit" v-model="form.companyId" @on-change="_companyChange" style="width:80%;">
        <Option v-for="item in companyList" :value="item.id" :key="item.value" :label="item.name" />
      </Select>
    </FormItem>
    <FormItem label="所属区域:" prop="groupId">
      <Select v-model="form.groupId" style="width:80%;">
        <Option v-for="item in groupList" :value="item.id" :key="item.value" :label="item.name" />
      </Select>
    </FormItem>
    <FormItem label="网络类型:" prop="networkType">
      <Select v-model="form.networkType" style="width:80%;">
        <Option :value="1" label="4G">4G</Option>
        <Option :value="2" label="局域网">局域网</Option>
      </Select>
    </FormItem>
    <FormItem label="云台设备:" prop="havPTZ" v-if="form.type=='2'">
      <RadioGroup v-model="form.havPTZ">
        <Radio :label="true">有</Radio>
        <Radio :label="false">无</Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="设备名称:" prop="name">
      <Input v-model.trim="form.name" placeholder="请输入设备名称..." style="width:80%;" />
    </FormItem>
    <FormItem label="设备别名:" prop="alias">
      <Input v-model.trim="form.alias" placeholder="请输入设备别名..." style="width:80%;" />
    </FormItem>
    <FormItem label="设备位置:" prop="location">
      <Input v-model.trim="form.location" placeholder="请输入设备位置..." style="width:80%;" />
    </FormItem>
    <FormItem label="设备编号:" prop="deviceNo">
      <Input v-model.trim="form.deviceNo" placeholder="请输入设备编号..." style="width:80%;" />
    </FormItem>
    <FormItem label="通道地址:" prop="channelIp">
      <Input v-model.trim="form.channelIp" placeholder="请输入通道地址..." style="width:80%;" />
    </FormItem>
    <FormItem label="通讯协议:" prop="protocolId">
      <Select :disabled="isEdit" v-model="form.protocolId" style="width:80%;">
        <Option v-for="item in argumentList" :value="item.id" :key="item.index" :label="item.name" />
      </Select>
    </FormItem>
    <FormItem label="是否启用:" prop="enable">
      <i-switch v-model="form.enable">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
  </Form>
</template>
<script>
export default {
  props: {
    row: {
      type: Object,
      default: {}
    }
  },
  mounted() {
    const vm = this;
    vm.form = vm.row;
    vm.getCompanyLists();
    vm._getFirmList();
  },

  data() {
    return {
      form: {},
      companyList: [],
      groupList: []
    };
  },
  methods: {
    // 获取企业列表
    async getCompanyLists() {
      let that = this;
      let params = {
        page: 1,
        size: 100000,
        thermalImage: 1
      };
      await getSearchCompany(params).then(res => {
        if (res.code == 200) {
          that.companyList = res.data;
        }
      });
    },

    // 获取厂商列表,要清空设备型号选中的以及列表
    async _getFirmList() {
      const vm = this;
      vm.form.modelId = "";
      vm.modelList = [];
      await getFirmList().then(res => {
        if (res.code == 200) {
          vm.firmData = res.data;
        }
      });
    },

    // 企业变更
    _companyChange(id) {
      this.form.groupId = "";
      this._getGroupList(id);
    },

    // 获取企业下/区域列表
    _getGroupList(id) {
      let that = this;
      let params = {
        companyId: id
      };
      getGroupList(params).then(res => {
        if (res.code == 200) {
          that.groupList = res.data.list;
        }
      });
    }
  }
};
</script>
